<template>
  <uni-nav-bar title="价格组" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.KeyCustom.name}}</view>
  <view class="package space-between">
    <view>价格组</view>
    <input class="uni-input" placeholder="请输入价格组" v-model="priceName" />
  </view>
  <view class="package">
    <view>加注机</view>
    <view class="fill">
      <view v-for="item in fillList" :key='item.id' @click="()=>fillID=item.id" :class="fillID==item.id?'active':''">
        {{item.code}}
      </view>
    </view>
  </view>
  <view class="package">
    <view>司机价</view>
    <view class="fill">
      <view v-for="item in price" :key='item.id' @click="()=>priceID=item.id" :class="priceID==item.id?'active':''">
        {{item.price}}
      </view>
    </view>
  </view>
  <view class="add" @click="submit()">确定</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { getCustomersPrice, getCustomersFlii } from '@/gql/administrator';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
   * 价格组
   * @property {String} priceName 价格组名称
   * @property {Number} priceID 选择的司机价
   * @property {Array} price 司机价列表
   * @property {Number} fillID 选择的加注机
   * @property {Array} fillList 加注机列表
   * @property {String} keyID 大客户ID
   * @property {String} type 价格组页面跳转状态
   */
  const priceName = ref('')
  const priceID = ref()
  const price = ref([])
  const fillID = ref()
  const fillList = ref([])
  const keyID = ref('')
  const type = ref('')
  onLoad((pearm) => {
    type.value = pearm.type
    keyID.value = pearm.id
    TeamInfo.geKeyIn(pearm.id)
    init()
    fill_s()
  })
  //获取大客户司机价
  function init() {
    showLoading('');
    const payload = {
      query: getCustomersPrice,
      variables: { customers_id: Number(keyID.value) },
    };
    toPublish('ql/control/getCustomersPrice', payload, (obj : any) => {
      const { getCustomersPrice } = obj.data;
      price.value = getCustomersPrice
    });
  }
  //获取大客户加注机列表
  function fill_s() {
    showLoading()
    const payload = {
      query: getCustomersFlii,
      variables: {
        customers_id: Number(keyID.value),
        type: 'use'
      },
    };
    toPublish(
      'ql/control/getCustomersFlii',
      payload,
      (obj : any) => {
        const { getCustomersFlii } = obj.data;
        fillList.value = getCustomersFlii
      }
    );
  }
  //提交
  function submit() {
    if (!priceName.value) {
      errorToast('请输入价格组')
      return
    }
    if (!fillID.value) {
      errorToast('请选择加注机')
      return
    }
    if (!priceID.value) {
      errorToast('请选择司机价')
      return
    }
    submit_s()
  }
  /**
   * 提交选择的价格组
   * @property {Number} customers_id 大客户ID
   * @property {String} name 价格组名称
   * @property {Number} fill_id 加注机ID
   * @property {Number} price_id 司机价ID
   */
  function submit_s() {
    showLoading('正在提交');
    const payload = {
      customers_id: Number(keyID.value),
      name: priceName.value,
      fill_id: Number(fillID.value),
      price_id: Number(priceID.value)
    };
    toPublish('control/addPriceGroup', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        successToast('提交成功');
        setTimeout(() => {
          if (type.value === 'add') {
            navBack()
          } else {
            navTo('administrator/keyaccount/keyList')
          }
        }, 1000)
      } else {
        errorToast(msg);
      }
    });
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 40rpx auto 20rpx;
    font-size: 32rpx;
  }

  .package {
    input {
      text-align: right;
    }
  }

  .fill {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    view {
      padding: 8rpx 30rpx;
      box-sizing: border-box;
      background: #ECF0F6;
      color: #333;
      border-radius: 5px;
      margin: 15rpx 10rpx;
    }

    .active {
      background: #2694FB;
      color: #fff;
    }
  }
</style>